<template>
    <h1>关于我们</h1>
    <a-button type="primary">hello</a-button>
    <a-button type="primary" block danger>hello</a-button>
    <p>{{ time }}</p>
    <ul>
        <li v-for="item in list">
            {{ item.title }}
        </li>
    </ul>
</template>
<script setup>
    import { ref, onMounted, onUnmounted } from 'vue'
    import { getTopics } from '@/api/topics';
    // 生命周期钩子，就是一个个的函数，
    // 该函数是在组件的特定时刻，自动执行的
    // 前后端交互

    const list = ref([])
    const time = ref('')
    let id = null
    onMounted(()=>{
        id = setInterval(()=>{
            console.log('time')
            time.value = new Date().toLocaleTimeString()
        },1000)
        getTopics()
            .then(res=>{
                list.value = res.data
            })
    })
    onUnmounted(()=>{
        clearInterval(id)
        console.log(123)
    })
    // axios
    // axios.get('https://cnodejs.org/api/v1/topics')
    //     .then(res=>{
    //         console.log(res.data)
    //         list.value = res.data.data
    //     })
    //     .catch((error)=>{
            
    //     })
    //     .finally(()=>{

    //     })


    // fetch('https://cnodejs.org/api/v1/topics')
    //     .then(res=>res.json())
    //     .then(res=>{
    //         console.log(res)
    //         list.value = res.data
    //     })

</script>